<!DOCTYPE html>
<html>
  <head>
    <title>Template Model</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css">
      * {
        margin : 0px ;
        padding : 0px ;
      }
      body {
        background: lightgray ;
        font-family: monospace ;
        text-align: center ;
      }
      .clear {
        clear : both ;
      }
      .wrapper {
        width : 990px ;
        background: #5E740B ;
        margin : 0 auto ;
      }
      section.s_cont , header.s_cont , footer.s_cont {
      /* section container */
        min-height: 10px;
        margin : 1px ;
        background: lightcoral ;
      }
      section.m_cont {
      /* module container */
        min-height: 10px;
      }
      .section {
        background: lightblue ;
        margin: 1px ;
      }
      .col2 .col {
          width :48% ;
          display : inline-block ;
          vertical-align: top ;
      }
      .col2 .col-small {
          width :32% ;
          display : inline-block ;
          vertical-align: top ;
      }
      .col2 .col-big {
          width :64% ;
          display : inline-block ;
          vertical-align: top ;
      }
      .col3 .col {
          width :32% ;
          display : inline-block ;
          vertical-align: top ;
      }
      i {
          color : red ;
      }
    </style>
  </head>
  <body>
      <header>
          <p> The #<i>number</i> refers the joc_cms_section.section_id from the database</p>
          <p> Use any html5 semantic markup depending on the template and themes needs.</p>
          <p> joc-cms will replace {SECTION_<i>n</i>} ( where <i>n</i> is section_id ) with the modules for this section.</p>
      </header>
    <section class="wrapper">
      <!-- HEADER -->
      
      <header class="s_cont">
        <nav class="section">header_top Nav <i>#1</i></nav>
        <div class="col2">
            <div class="col section">2 column header_left <i>#2</i></div>
            <div class="col section">2 column header_right <i>#3</i></div>
        </div>
        <div class="section clear ">header_center <i>#4</i></div>
        <div class="col3">
            <div class="col section">3 column header_left <i>#5</i></div>
            <div class="col section">3 column header_center <i>#6</i></div>
            <div class="col section">3 column header_right <i>#7</i></div>
        </div>        
        <nav class="section">header_bottom Nav <i>#8</i></nav>
      </header>
        
      <!-- BODY -->
      
      <section class="col2">
        <section class="col-big section">2 column body top Content <i>#9</i></section>
        <nav class="col-small section">2 column body top Nav <i>#10</i></nav>
      </section>
      <section class="section">body with 100% 1 <i>#11</i></section>
      <section class="col3">
        <section class="col section">3 column body top left ( content or nav ) <i>#12</i></section>
        <section class="col section">3 column body top Content <i>#13</i></section>
        <section class="col section">3 column body top right ( content or nav ) <i>#14</i></section>
      </section>
      
      <section class="section" style="background:#0073ea">body with 100% 2 <i>#15</i></section>
      
      <section class="col2">
        <section class="col-big">
            <section class="col2">
                <section class="col-big section">2 column left > 2 column body Bottom Content <i>#16</i></section>
                <nav class="col-small section">2 column left > 2 column body Bottom Nav <i>#17</i></nav>
            </section>
            <section class="section">body with 100% 3 <i>#18</i></section>
            <section class="col3">
               <section class="col section">2 column left > 3 column body bottom left ( content or nav ) <i>#19</i></section>
               <section class="col section">2 column left > 3 column body bottom center Content <i>#20</i></section>
               <section class="col section">2 column left > 3 column body bottom right ( content or nav ) <i>#21</i></section>
            </section>
        </section>
        <nav class="col-small section">2 column right body Bottom Nav <i>#22</i></nav>
      </section>
      
      
      
      <!-- FOOTER -->
      <footer class="s_cont">
        <nav class="section">footer_top Nav <i>#23</i></nav>
        <div class="col2">
            <div class="col section">2 column footer_left <i>#24</i></div>
            <div class="col section">2 column footer_right <i>#25</i></div>
        </div>
        <div class="section clear ">footer_center <i>#26</i></div>
        <div class="col3">
            <div class="col section">3 column footer_left <i>#27</i></div>
            <div class="col section">3 column footer_center <i>#28</i></div>
            <div class="col section">3 column footer_right <i>#29</i></div>
        </div>
        <nav class="section">footer_bottom Nav <i>#30</i></nav>
      </footer>
    </section>
    <footer>
        <p><b>Note:</b> The place and width of the columns are just examples,</p>
        <p> feel free to put every section in place you want with the style you want.</p>
    </footer>
  </body>
</html>
